---
import { getLanguageFromURL } from "../../languages";
import { SIDEBAR } from "../../config";

type Props = {
  currentPage: string;
};

const { currentPage } = Astro.props as Props;
const currentPageMatch = currentPage.slice(1);
const langCode = getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode];
---

<nav aria-labelledby="grid-left">
  <ul class="nav-groups">
    <a href="https://electrodb.fun" class="top-level-link" target="_blank" rel="noopener noreferrer">
      <h4>ElectroDB Playground ›</h4>
    </a>
    {
      Object.entries(sidebar).map(([header, children]) => (
        <li>
          <div class="nav-group">
            <h4>{header}</h4>
            <ul>
              {children.map((child) => {
                const url = Astro.site?.pathname + child.link;
                return (
                  <li class="nav-link">
                    <a
                      href={url}
                      aria-current={
                        currentPageMatch === child.link ? "page" : false
                      }
                    >
                      {child.text}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>
        </li>
      ))
    }
  </ul>
</nav>

<script is:inline>
  window.addEventListener("DOMContentLoaded", () => {
    var target = document.querySelector('[aria-current="page"]');
    if (target && target.offsetTop > window.innerHeight - 100) {
      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
    }
  });
</script>

<style>
  nav {
    width: 100%;
    margin-right: 1rem;
  }

  .nav-groups {
    height: 100%;
    padding: 2rem 1rem;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 100vh;
  }

  .nav-groups > li + li {
    margin-top: 2rem;
  }

  .nav-groups > :first-child {
    padding-top: var(--doc-padding);
  }

  .nav-groups > :last-child {
    padding-bottom: 2rem;
    margin-bottom: var(--theme-navbar-height);
  }

  .nav-group-title {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.1rem 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .nav-link a {
    font-size: 1rem;
    margin: 1px;
    padding: 0.3rem 1rem;
    font: inherit;
    color: inherit;
    text-decoration: none;
    display: block;
  }

  .nav-link a:hover,
  .nav-link a:focus {
    background-color: var(--theme-bg-hover);
  }

  .nav-link a[aria-current="page"] {
    color: var(--theme-text-accent);
    background-color: var(--theme-bg-accent);
    font-weight: 600;
  }

  .top-level-link {
    text-decoration-line: none;
  }

  .top-level-link:hover,
  .top-level-link:focus {
    text-decoration-line: underline;
  }

  @media (min-width: 50em) {
    .nav-groups {
      padding: 0;
    }
  }
</style>

<style is:global>
  :root.theme-dark .nav-link a[aria-current="page"] {
    color: hsla(var(--color-base-white), 100%, 1);
  }
</style>
